<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删改查3</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        .content{
            width: 1222px;
        }
        ul li{
            width: 200px;
            height: 25px;
            float: left;
            border: 1px solid #000;
            list-style: none;
            text-align: center;
            line-height: 25px;
        }
        ul{
            width: 1222px;
            overflow: hidden;
        }
        h2{
            text-align: center;
        }
        #userID,#userAge{
            width: 32px;
        }
    </style>
</head>
<body>
    <!-- 输入提交大框 -->
    <div class="content">
        <h2>增删改查3</h2>
        编号：<input type="text" id="userID">
        姓名：<input type="text" id="userName" maxlength="5">
        性别：男:<input type="radio" value="0" name="sex" checked>
              女:<input type="radio" value="1" name="sex">
        年龄：<input type="text" id="userAge" maxlength="3">
        电话：<input type="text" id="userPhone" maxlength="11">
        邮箱：<input type="text" id="userEmail" maxlength="17">
        <button onclick="add()">提交</button>
        <input type="reset" onclick="reset()" id="reset">
    </div>
    <!-- 中框 -->
    <div class="center">
        <ul>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
            <li>电话</li>
            <li>邮箱</li>
            <li>操作</li>
        </ul>
    </div>
    <!-- show渲染框 -->
    <div id="show">
        <!-- <ul>
            <li>张三</li>
            <li>男</li>
            <li>18</li>
            <li>18327614096</li>
            <li>1278703962@qq.com</li>
        </ul> -->
    </div>


    <script>
        //创建数组对象
        var data=[{
            id:0,
            name:"张三",
            sex:0,
            age:18,
            phone:"18327614096",
            email:"1278703962@qq.com",
            delete:false,
        },];
        //渲染数组并渲染
        function datashow(){
        var show = document.getElementById("show");
        var str="";
        for(var i=0;i<data.length;i++){
            data[i].id=i;
            //判断把0和1并渲染到页面成男和女
            if(data[i].sex==0){
                data[i].sex="男";
            }else if(data[i].sex==1){
                data[i].sex="女";
            }

            str += '<ul>'+
            '<li>'+data[i].name+'</li>'+
            '<li>'+data[i].sex+'</li>'+
            '<li>'+data[i].age+'</li>'+
            '<li>'+data[i].phone+'</li>'+
            '<li>'+data[i].email+'</li>'+
            '<li><button onclick="del('+i+')">删除</tutton><button onclick="updata('+i+')">修改</button></li>'+
        '</ul>'
        // console.log(data);
        }
        show.innerHTML=str;

       }
       //删除
       function del(i){
        data.splice(i,1);
        datashow();
       }
       //添加
       
       function add() {
        userID=document.getElementById("userID").value;
        // console.log(userID);
        if(!userID){
                    //拿到名字框的value值并赋值
        userName = document.getElementById("userName").value;
        // console.log(username);
        //获取性别radio
        sex=document.getElementsByName("sex");
        // console.log(sex);
        var gender;
        for(var i = 0;i<sex.length;i++){
            if(sex[i].checked==true){
                    gender=sex[i].value;
                    // console.log(gender);
            }
            
        }
            userAge=document.getElementById("userAge").value;
            userPhone=document.getElementById("userPhone").value;
            userEmail=document.getElementById("userEmail").value;
            data.push({
            name:userName,
            sex:gender,
            age:userAge,
            phone:userPhone,
            email:userEmail,
            })
        // console.log(data);
        }else{
            data[userID].name=document.getElementById("userName").value;
            data[userID].age=document.getElementById("userAge").value;
            data[userID].phone=document.getElementById("userPhone").value;
            data[userID].email=document.getElementById("userEmail").value;
            var gender;
            sex=document.getElementsByName("sex");
            for(var i=0;i<sex.length;i++){
                if(sex[i].checked==true){
                    gender=sex[i].value;
                }
            }
            data[userID].sex=gender;
        }
        datashow();
       }
       //修改
       function updata(i){
        //把渲染里面框的值获取到然后赋值到外面的input框中
        document.getElementById("userID").value=data[i].id;
        document.getElementById("userName").value=data[i].name;
        document.getElementById("userAge").value=data[i].age;
        document.getElementById("userPhone").value=data[i].phone;
        document.getElementById("userEmail").value=data[i].email;
        //判断男女checked
        // document.getElementsByName("sex")=data[i].sex;
        // console.log(data[i].sex);
        if(data[i].sex=="男"){
            //如果渲染框里面的性别为男，则返回sex name的第一个input框中 radio框的value值为真代表以选中；
            document.getElementsByName("sex")[0].value==true;
        }else if(data[i].sex=="女"){
            // 如果渲染框中里面的性别为女，则返回sex name的第二个input框中的radio的value值为真代表以选中
            document.getElementsByName("sex")[1].value==true;
        }
        datashow();
       }
       //重置
       function reset(){
        document.getElementById("userID").value="";
        document.getElementById("userName").value="";
        document.getElementById("userAge").value="";
        document.getElementById("userPhone").value="";
        document.getElementById("userEmail").value="";
       }


       datashow();

    </script>
</body>
</html>